<!DOCTYPE html>
<html lang="zh-cn">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=3,minimum-scale=1,maximum-scale=1,user-scalable=no">

		<title>ablog-article</title>

		<link href="static/img/favicon.ico" rel="icon" type="image/x-icon">
		<link href="static/img/favicon.ico" rel="shortcut icon" type="image/x-icon">
		<link href="static/img/favicon.ico" rel="bookmark" type="image/x-icon">
		<link href="static/css/app.css" rel="stylesheet" type="text/css">
		<link href="static/css/article.css" rel="stylesheet" type="text/css">
		<!-- ajax -->
		<script src="static/js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="static/js/jquery.session.js" type="text/javascript" charset="utf-8"></script>
		<script src="static/js/vue.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="static/js/axios.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="static/js/util.js" type="text/javascript" charset="utf-8"></script>
		<!-- layui -->
		<link href="static/layui/css/layui.css" rel="stylesheet" type="text/css">
		<script src="static/layui/layui.js" type="text/javascript" charset="utf-8"></script>
		<!-- bootstrap -->
		<link href="static/bootstrap/css/bootstrap.css" rel="stylesheet" type="text/css">
		<script src="static/bootstrap/js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
	</head>

	<body style="position: static; overflow: visible;">
		<div class="app" id="list" v-cloak>
			<div class="left-container">
				<div class="left-layout-container pc">
					<div class="user-info">
						<img :src="systemobj.headimg" @click="jump('about.html')">
						<div class="login-name">{{systemobj.name}}</div>
						<div>{{systemobj.context}}</div>
					</div>
					<ul class="other-site">
						<li><a :href="systemobj.csdn" target="_blank"><img src="static/img/csdn.png"></a></li>
						<li><a :href="systemobj.git" target="_blank"><img src="static/img/git.png"></a></li>
					</ul>
					<ul class="left-menu">
						<li class="router-link-exact-active router-link-active selected-menu" @click="jump('index.html')">个人博客</li>
						<li class="" @click="jump('about.html')">About Me</li>
					</ul>
					<div class="qq-group">
						<span>打&nbsp;赏&nbsp;扫&nbsp;码</span>
						<img :src="systemobj.qrcode">
					</div>
					<div class="copyright">{{systemobj.copyright}}</div>
				</div>
			</div>

			<div class="blog-container main-container" id="issue">
				<div class="blog-detail-container">
					<div class="title-container"><span class="title">{{obj.title}}</span>
						<ul>
							<li class="tag tag-small color_cyan">{{obj.articleType.name}}</li>
						</ul>
						<span class="back" @click="back()">
							<img src=""
							 class="back-icon">返回
						</span>
					</div>
					<div class="comment-container bga-back-top">
						<div class="comment">
							<div class="comment-title">
								<div><img :src="systemobj.headimg"><span>{{systemobj.name}}</span></div><span class="time">{{obj.addtime}}</span>
							</div>
							<article class="comment-body markdown-body">
								<div v-html="obj.content"></div>
							</article>
						</div>

						<div class="add-comment-container">
							<div class="tab-container">
								<ul>
									<li :class="activeClass==1?'active':''" @click="active(1)">Message</li>
									<li :class="activeClass==2?'active':''" @click="active(2)">Write</li>
								</ul>
								<div><a href="https://passport.csdn.net/login?code=public" target="_blank">Login&nbsp;CSDN</a></div>
							</div>
							<!-- 评论记录模块start -->
							<div class="col-md-12" :style="activeClass==1?'':'display: none;'">
								<ul class="media-list">
									<li class="media" v-for="item in commentobj.list">
										<div class="media-left">
											<a><img class="media-object img-circle" :src="item.headimg" alt=""></a>
										</div>
										<div class="media-body">
											<h5 class="media-heading">{{item.username}}<span class="ds-time">{{item.addtime}}</span></h5>
											<p>{{item.content}}</p>
										</div>
										<hr />
									</li>
								</ul>
							</div>
							<button type="button" class="btn btn-link" @click="commentobj.nextPage>0?loadCommentPage(commentobj.nextPage,aid):''" :style="activeClass==1?'font-weight: 600;':'display: none;'">加载更多</button>
							<!-- 评论记录模块end -->
							<input type="text" v-model="comment.username" class="comment-name" placeholder="你的昵称" :style="activeClass==2?'':'display: none;'" />
							<input type="email" v-model="comment.email" class="comment-name" placeholder="你的邮箱" :style="activeClass==2?'':'display: none;'" />
							<textarea v-model="comment.content" :style="activeClass==2?'resize: none;':'display: none;'" rows="5" placeholder="说点什么？"></textarea>
							<!-- 下拉框start -->
							<div class="dropdown" :style="activeClass==2?'top: 8px;':'display: none;'">
								<button type="button" class="btn btn-primary dropdown-toggle" style="padding: 8px 12px;" data-toggle="dropdown">Choose a picture</button>
								<img :src="headimg" style="width: 30px;border-radius: 50%;">
								<div class="dropdown-menu">
									<li>
										<a data-toggle="modal" @click="setHeadimg($event)"><img src="static/img/headimg/a.png">雪山</a>
										<a data-toggle="modal" @click="setHeadimg($event)"><img src="static/img/headimg/b.png">叶子</a>
										<a data-toggle="modal" @click="setHeadimg($event)"><img src="static/img/headimg/c.png">大脸</a>
									</li>
								</div>
							</div>
							<!-- 下拉框end -->
							<button @click="addComment()" class="add-comment-btn" :style="activeClass==2?'margin: -30px 15px 15px 0;':'display: none;'">Comment</button>
						</div>
					</div>
				</div>
			</div>
		</div>

		<script type="text/javascript">
			var size = 5;

			var vm = new Vue({
				el: '#list',
				data: {
					obj: { //文章内容
						articleType: {}
					},
					commentobj: {
						list: []
					}, //评论记录
					systemobj: {}, //系统信息
					activeClass: 1, //类型下标
					headimg: '', //评论头像预选
					aid: '' ,//文章ID
					comment: { //增加评论
						username: '',
						email: '',
						content: ''
					}
				},
				methods: {
					loadPage(id) { //加载文章
						var _this = this;
						axios({
							method: 'get',
							url: getRootURL() + 'article/query',
							params: {
								id: id
							},
							headers: {
								'Content-Type': 'application/x-www-form-urlencoded'
							}
						}).then(function(res) {
							console.log(res);

							if (res.data.status >= 0) {
								_this.obj = res.data.object
								_this.top()
							} else {
								alert(res.data.msg);
							}

						}).catch(function(err) {
							alert(err);
						});
					},
					loadCommentPage(num, aid) { //加载文章评论记录
						var _this = this;
						axios({
							method: 'get',
							url: getRootURL() + 'comment/query-all-page',
							params: {
								pagenum: num,
								pagesize: size,
								aid: aid
							},
							headers: {
								'Content-Type': 'application/x-www-form-urlencoded'
							}
						}).then(function(res) {
							console.log(res);

							if (res.data.status >= 0) {
								var arr = _this.commentobj.list;//获取旧的数组数据
								arr.push(...res.data.object.list);//加入新的数组数据
								_this.commentobj = res.data.object;//写入对象
								_this.commentobj.list = arr;//写入数组数据
								_this.top();
							} else {
								alert(res.data.msg);
							}

						}).catch(function(err) {
							alert(err);
						});
					},
					loadSystem() { //加载系统信息
						var _this = this;
						axios({
							method: 'get',
							url: getRootURL() + 'system/query',
							params: {
								id: "system"
							},
							headers: {
								'Content-Type': 'application/x-www-form-urlencoded'
							}
						}).then(function(res) {
							console.log(res);

							if (res.data.status >= 0) {
								_this.systemobj = res.data.object
							} else {
								alert(res.data.msg);
							}

						}).catch(function(err) {
							alert(err);
						});
					},
					addComment() { //发布评论
						var _this = this;
						axios({
							method: 'post',
							url: getRootURL() + 'comment/add',
							data: {
								"aid": _this.aid,
								"username": _this.comment.username,
								"email": _this.comment.email,
								"content": _this.comment.content,
								"headimg": _this.headimg
							},
							headers: {
								'Content-Type': 'application/json'
							}
						}).then(function(res) {
							console.log(res);
					
							if (res.data.status >= 0) {
								alert(res.data.msg);
							} else {
								alert(res.data.msg);
							}
					
						}).catch(function(err) {
							alert(err);
						});
					},
					top() { //滚动条高度置0
						let issue = document.getElementById('issue');
						issue.scrollTop = 0;
					},
					jump(url, id) { //页面跳转
						if (id !== null && id !== '') {
							$.session.set("id", id);
						}
						$(location).attr('href', url);
					},
					active(index) {
						var _this = this;
						_this.$data.activeClass = index;
					},
					setHeadimg(event) {
						var _this = this;
						let tag = event.currentTarget;
						_this.$data.headimg=tag.firstChild.src;
					},
					back() {
						window.history.go(-1); //返回上一层 可能需要保存上页状态
					},
					onSubmit() {
						//防止form冒泡
						return false;
					}
				},
				created() {
					var _this = this;
					_this.$data.aid=$.session.get("id");
					_this.loadPage(_this.$data.aid); //初始化文章记录
					_this.loadCommentPage(1, _this.$data.aid); //初始化文章评论记录
					_this.loadSystem() //初始化系统信息
				},
				mounted() {

				}
			})
		</script>
	</body>
</html>
